<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="企业账号名称：">
          <el-input v-model="formInline.merchantName" placeholder="请输入企业账号名称"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称：">
          <el-input v-model="formInline.shopName" placeholder="请输入店铺名称"></el-input>
        </el-form-item>
        <el-form-item label="预付卡上链编号：">
          <el-input v-model="formInline.customerCardId" placeholder="请输入预付卡上链编号"></el-input>
        </el-form-item>
        <el-form-item label="卡ID">
          <el-input v-model="formInline.customerCardNo" placeholder="请输入卡ID"></el-input>
        </el-form-item>
        <el-form-item label="交易时间：">
          <el-date-picker v-model="timeArr" type="daterange" range-separator="至" @change="handleTiem"
            value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
        @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
        <template v-slot:useCardMoney="{ scope }">
          <template>
            <div>{{scope.row.useCardMoney}}</div>
          </template>
        </template>
        <template v-slot:surplusCardMoney="{ scope }">
          <template
            v-if="scope.row.customerCardType != 2 && scope.row.customerCardType != 4 && scope.row.customerCardType != 5 && scope.row.customerCardType != 8&& scope.row.customerCardType != 9">
            <div>现金：{{scope.row.surplusCardMoney}}</div>
            <div>赠送：{{scope.row.surplusCardGiveMoney }}</div>
          </template>
          <template v-if="scope.row.customerCardType == 2 || scope.row.customerCardType == 5 || scope.row.customerCardType == 8">
            <div>{{scope.row.surplusCardMoney}} 次</div>
          </template>
          <template v-if="scope.row.customerCardType == 4">
            <div>{{scope.row.surplusCardMoney}} 课时</div>
          </template>
           <template v-if="scope.row.customerCardType == 9">
            <div>{{scope.row.surplusCardMoney}} 天</div>
          </template>
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="handleDown(scope.row.contract)" type="primary">下载协议</el-button>
        </template>
      </ex-table>
    </div>
  </div>
</template>
<script>
  // components
  import {
    getTradelist
  } from "@/api/blockChain";
  import handlePageMixin from "@/mixins/handlePageMixin";
  export default {
    name: "warningList",
    components: {

    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        formInline: {
          merchantName: "", //企业账号名称
          shopName: "", //店铺名称
          customerCardNo: "", //预付卡上链编号
          customerCardId: "", //卡ID
          startTime: "", //交易起始时间
          endTime: "", //交易结束时间
        },
        date: [],
        tableData: [],
        tableColumn: [{
            prop: "createTime",
            label: "交易时间",
            width: 200
          },
          {
            prop: "merchantName",
            label: "企业账号名称",
            width: 200
          },
          {
            prop: "shopName",
            label: "店铺名称",
            width: 200
          },
          {
            prop: "customerCardId",
            label: "链上卡编号",
            width: 200
          },
          {
            prop: "phoneNumber",
            label: "购卡人手机号",
            width: 150
          },
          {
            prop: "customerCardNo",
            label: "卡ID",
            width: 200
          },
          {
            prop: "billTypeDict",
            label: "交易类型",
            width: 200
          },
          {
            label: "卡金额变化",
            slot: true,
            slotName: "useCardMoney",
            width: 100
          },
          {
            label: "卡内余额",
            slot: true,
            slotName: "surplusCardMoney",
            width: 100
          },
          // { prop: "surplusCardMoney", label: "卡内余额" ,width:200},
          {
            prop: "voucher",
            label: "交易块地址",
            width: 200
          },
          // { label: "操作", slot: true, slotName: "operate",width:200 },
        ],
        timeArr: '',
      };
    },
    computed: {

    },
    mounted() {
      this.getList();
    },
    methods: {

      handleDown(url) {
        console.log('this.$IMG_URL', this.$IMG_URL)
        window.location.href = this.$IMG_URL + url
        // window.open(this.$IMG_URL+'/'+url,"_blank")
      },
      search() {
        //搜索
        console.log(this.formInline);
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      reset() {
        this.date = [];
        this.formInline = {};
        this.timeArr = ''
        this.pageOptions.pageNum = 1
        this.$refs.table.pageOptions.pageNum = 1
        this.getList();
      },
      //选择时间
      handleTiem(data) {
        this.formInline.startTime = data[0]
        this.formInline.endTime = data[1]
      },
      judgeType(type) {
        if (type == 2 || type == 4) {
          return '-'
        } else {
          return '+'
        }
      },
      getList() {
        //联动信息
        const params = {
          ...this.pageOptions,
          ...this.formInline,
        };
        this.loading = true;
        getTradelist(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            console.log('res', res)
            this.tableData = records;
            this.tableData = this.tableData.map(item => {
              console.log('item', item)
              if (item.billType == 2||item.billType == 6) {
                if (item.customerCardType == 2 || item.customerCardType == 5 || item.customerCardType == 8) {
                  item.useCardMoney = '-' + item.useCardMoney + '次'
                  return item
                } else if (item.customerCardType == 4) {
                  item.useCardMoney = '-' + item.useCardMoney + '课时'
                  return item
                } else if (item.customerCardType == 9) {
                  item.useCardMoney = '-' + item.useCardMoney + '天'
                  return item
                }else {
                  item.useCardMoney = '-' + item.useCardMoney
                  return item
                }
              } else {
                item.useCardMoney = '+' + item.useCardMoney
                return item
              }

            })
            this.$refs.table.pageOptions.total = total;
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  };

</script>
<style lang="scss">
  .el-card-title {
    font-size: 20px;
  }

</style>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px 0;
  }

  .el-form--inline .el-form-item {
    margin-right: 40px;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }



  .listBox_head {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
  }

</style>
